<template>
  <div class="page">
    <div class="page-container">
      <Header activeId="5" />
      <div class="content">
        <Bread :data="[{ text: '首页', href: '/' }, { text: '石窟资讯' }]" />
        <div class="article_list" style="overflow: hidden">
          <ul>
            <li v-for="(item, i) in list" :key="i" class="wpart-border-line">
              <div class="wp-new-article-style-01-left">
                <a class="articleid" :href="'/news/item?id=' + item.id">
                  <img :alt="item.title"
                    :src="getNewsImageSrc(item.imageUrl)"
                    class="wp-article_list-thumbnail"
                    style="
                      margin: 0 auto;
                      position: relative;
                      height: 240px;
                      width: 380px;
                    "
                /></a>
              </div>
              <div class="wp-new-article-style-01-right">
                <div class="item-content">
                  <div class="title">
                    <a class="article-link" :href="'/news/item?id=' + item.id" :title="item.title">
                      {{ item.title }}
                    </a>
                  </div>
                  <p class="abstract">{{ item.description }}</p>
                  <p class="time">
                    <span class="wp-new-ar-pro-time">
                      <client-only><b-icon icon="calendar2-day"></b-icon></client-only>&nbsp;{{ item.publishDate }}
                    </span>
                  </p>
                </div>
                <div class="flex-right">
                  <a :href="'/news/item?id=' + item.id" class="frame-rQI-3" style="visibility: visible;">
                    <div class="text-HKd-1">
                      <div class="p-text-HKd-1">
                        <span class="span-wXS-1">查看</span>
                      </div>
                    </div>
                    <div class="frame-qRg-2">
                      <client-only><b-icon icon="chevron-right"></b-icon></client-only>
                    </div>
                  </a>
                </div>
              </div>
            </li>
          </ul>
          <div style="display:flex;justify-content: center">
            <b-pagination-nav
              v-model="pageIndex"
              :total-rows="total"
              :number-of-pages="pages"
              :link-gen="linkGen"></b-pagination-nav>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import Header from "@/components/header.vue";
import Footer from "@/components/footer.vue";
import Bread from "@/components/bread.vue";

export default {
  components: {
    Header,
    Footer,
    Bread
  },

  data() {
    return {
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      pages: 1,
      list: []
    }
  },

  async asyncData({ query, $service, $axios }) {
    let res = await $service.news.queryListPage({
      pageNum: query.pageIndex || 1,
      pageSize: 10
    }, {
      $http: $axios
    })

    return {
      pageIndex: res?.data?.pageIndex,
      total: res?.data?.total,
      pages: Math.ceil(res?.data?.total / 10) || 10,
      list: res?.data?.rows || []
    }
  },

  methods: {
    // 链接生成
    linkGen(pageIndex) {
      return `/news?pageIndex=${pageIndex}`
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../assets/css/news.less';
</style>
